Skip to content

Comments

Initial SSR Migration #3

Merged
davidgamez merged 86 commits intomainfrom
spike/ssr-migration
Jan 28, 2026
Merged

Initial SSR Migration #3
davidgamez merged 86 commits intomainfrom
spike/ssr-migration

Conversation

@Alessandro100
Copy link
Contributor

@Alessandro100 Alessandro100 commented Jan 21, 2026 •
edited
Loading

This PR introduces the migration to a SSR application using NextJs. For this PR, the Feed Detail Page (partially) and the About page were made server components as a proof of concept. This PR is not ready for PROD but as a great benchmark to keep development on SSR.

High Level Changes

  • Introduced NextJs (SSR Library)
  • Updating to React 19
  • Updating to MUI 7
  • Updating to using Node 24
  • Updated i18n library for SSR support
  • Removed Leaflet in favour of maplibre (full cleanup to come)
  • Updated Authentication for SSR support (to continue)
  • Feed Detail page -> started SSR support (to continue)

Important follow up tasks

  • Revisiting Firebase Remote Configs to be SSR ready
  • Updating the Authentication system for Firebase Session Management
  • Setting up CICD

Future Improvements

  • Better use of MUI theme in RSC
  • More use of code splitting / lazy loading

Developer Tooling & Configuration:

  • Updated ESLint configuration to auto-detect React version for better linting compatibility. (.eslintrc.json)
  • Added a Next.js-compatible Jest configuration for improved unit testing support. (jest.config.ts)
  • Removed the old Babel config, which is no longer needed with Next.js. (babel.config.js)
  • Included vercel-react-best-practices skills to improve copilot Agent code + review

Testing & E2E Updates:

  • Refactored Cypress E2E and support files to use new Next.js environment variable conventions (NEXT_PUBLIC_*), updated test routes to match Next.js routing, and improved test reliability with more robust selectors and timeouts. (cypress.config.ts, cypress/e2e/addFeedForm.cy.ts, cypress/e2e/feeds.cy.ts, cypress/support/commands.ts) [1] [2] [3] [4] [5] [6] [7]
  • Updated fixture data to include new fields for validation reports, supporting new UI features and tests. (cypress/fixtures/gtfs_feed_test-516.json)

Documentation Improvements:

  • Overhauled README.md to reflect the migration to Next.js, updated environment variable instructions, added new scripts, and documented API type generation and E2E testing workflows. (README.md) [1] [2] [3]

These changes collectively modernize the project, streamline development and deployment, and ensure tests and documentation are aligned with the new Next.js architecture.

@Alessandro100
simple 'useClient' + updaated env var
3111af2
@Alessandro100
more env var name change
281edd0
@Alessandro100
nextjs configs + react update
1c61928
@Alessandro100
updated to MUI 7.3.6
b7c961b
@Alessandro100
small adjustments
529c7c0
@Alessandro100
footer styling
b9a4098
@Alessandro100
updated components
478df83
@Alessandro100
initial working code
ef7b952
@Alessandro100
configs to deploy nextjs to cloud run
772a9d9
@Alessandro100
Map away from leaflet (not working)
c48c7d9
@Alessandro100
fetching datasets
281a0a1
@Alessandro100
about page as SSR (not quite)
31c5c43
@Alessandro100
commenting out old code
9a0ae43
@Alessandro100
theme updates
658bb0b
@Alessandro100
about page ssr friendly (not done looking)
a62277f
@Alessandro100
updated files with new i18n settings
2afb96f
@Alessandro100
SSR i18n setup config
6abc1ea
@Alessandro100
firebase remote config -> to re-look at
bf4a0f8
@Alessandro100
associated feeds + structured data
fdd85ef
@Alessandro100
updated i18n keys for feedview
c37be9a
@Alessandro100
updated styling of h1 consistent tag
a331988
@Alessandro100
feeds search page update to nextjs
d41aeb6
@Alessandro100
i18n fix
0cb996e
@Alessandro100
client access token on init fix
57bf260
@Alessandro100
fixed account state
b7a29a2
@Alessandro100
i18n keys common update
75b9e2b
@Alessandro100
fixed env usage
8407ca0
@Alessandro100
bug fixes
7a31a1e
@Alessandro100
comments and package update
93f9547
@Alessandro100
feed detail page: routes data
cdf3802
@Alessandro100 Alessandro100 self-assigned this Jan 21, 2026
@davidgamez davidgamez mentioned this pull request Jan 27, 2026
Closed
jcpitre
jcpitre reviewed Jan 27, 2026
View reviewed changes
external_types/DatabaseCatalogAPI.yaml
@@ -0,0 +1,1801 @@
openapi: 3.0.0
Copy link
Contributor

@jcpitre jcpitre Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't this file be obtained from the mobiity-feed-api project?

Copy link
Contributor Author

@Alessandro100 Alessandro100 Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's copy and pasted from the mobiity-feed-api repo manually. It's one of the drawbacks of separating the repos. For the fastest fix this is it. Maybe we can think of a better long term solution ex: publishing a github asset and having the frontend consume it

Copy link
Contributor

@jcpitre jcpitre Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that the PR is big enough as it is.
But I would suggest sometimes in the future maybe to get the file directly from git: https://github.com/MobilityData/mobility-feed-api/blob/main/docs/DatabaseCatalogAPI.yaml

Copy link
Contributor Author

@Alessandro100 Alessandro100 Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes I agree, for that to happen we would have to publish some sort of asset. I'll make a follow up ticket

@davidgamez
Copy link
Member

davidgamez commented Jan 28, 2026

I found a few issues testing locally

  • The URL http://localhost:3000/feeds/gtfs/map renders a 404 page.
  • The links to the notices(errors, warnings, and infos) don't go anywhere. Clicking those buttons doesn't open the validator's report. The links in the list of datasets at the bottom of the page work as expected.
Screenshot 2026-01-28 at 9 39 30 AM
  • The account details links(http://localhost:3000/account) don't render the expected page, it re-render the current page.
  • When the dark theme is selected, switching from page to page, a white screen is visible, creating a "flashing effec.t"

As this is not production-ready, I suggest merging it and addressing the mentioned issues in a separate PR.

@Alessandro100
Copy link
Contributor Author

Alessandro100 commented Jan 28, 2026

For The URL http://localhost:3000/feeds/gtfs/map renders a 404 page. this is expected behaviour as that is not a valid url. There is a link that I found that brings you to that url that needs to be fixed

The links to the notices: yes this is a small fix

Account detail link: good find

For the theme, this is a known issue that can be solved with MUI CSS Variables: https://mui.com/material-ui/customization/css-theme-variables/overview/. It's a decent effort to make this switch

Agreed about merging it and addressing in other tickets

@davidgamez davidgamez merged commit 068b0d9 into main Jan 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jcpitre jcpitre jcpitre left review comments

@davidgamez davidgamez davidgamez approved these changes

Assignees

@Alessandro100 Alessandro100

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Alessandro100 @davidgamez @jcpitre